<template>
  <div class="batchBox">
    <el-form
      ref="detail"
      :model="detail"
      label-position="right"
      :rules="rules"
      size="mini"
    >
      <div class="title">客户基本信息</div>
      <div class="form">
          <el-form-item label="客户ID：" v-if="id" style="width: 100%;">
            <el-input
              v-model="id"
              readonly
              class="w300"
            />
          </el-form-item>
        
        <el-form-item label="客户姓名：" prop="customer_name">
          <el-input
            v-model="detail.customer_name"
            class="w300"
            placeholder="请填写客户姓名"
          />
        </el-form-item>
        <el-form-item label="客户性别：">
          <el-radio-group v-model="detail.sex">
            <el-radio :label="2">女性</el-radio>
            <el-radio :label="1">男性</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="手机号码：" prop="telephone">
          <el-input
            v-model="detail.telephone"
            class="w300"
            placeholder="请填写手机号码"

          />
        </el-form-item>
        <el-form-item label="客户生日：" prop="birthday">
          <el-date-picker
            v-model="detail.birthday"
            class="w300"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          />
        </el-form-item>
      </div>
      <div class="title">客户详细信息</div>
      <div class="form">
        <el-form-item label="所在区域：" prop="countryId" class="region">
          <region
            v-if="id != 0 && region.province_id"
            :detail="region"
            size="mini"
            @getRegion="getRegion"
          />
          <region v-else :detail="region" size="mini" @getRegion="getRegion" />
        </el-form-item>
        <el-form-item label="具体地址：" prop="detailed_address">
          <el-input
            v-model="detail.detailed_address"
            class="w300"
            placeholder="请填写详细地址"
            type="textarea"
          />
        </el-form-item>
        <el-form-item label="归属门店：" prop="shop_id" v-if="this.userInfo.shop_id">
          <el-input
            v-model="shop_name"
            readonly
          />
        </el-form-item>
            <el-form-item label="归属门店：" prop="shop_id" v-else>
              <el-select
                v-model="detail.shop_id"
                class="w300"
                filterable
                remote
                :disabled="disabled"
                :remote-method="getShop"
                @change="changeShop"
                placeholder="请输入归属门店"
              >
                <el-option
                  v-for="item in options.shop_id"
                  :key="item.shopId"
                  :label="item.shopName"
                  :value="item.shopId"
                />
          </el-select>
        </el-form-item>
        <el-form-item label="客户来源：" prop="source_id">
          <el-select
            v-model="detail.source_id"
            class="w300"
            placeholder="请选择来源"
            :disabled="disabled"
            @change="changeSource"
          >
            <el-option
              v-for="item in options.source_id"
              :key="item.id"
              :label="item.name"
              :value="item.id"
              :disabled="item.disabled"
            />
          </el-select>
        </el-form-item>
        
        <el-form-item label="介绍人：">
          <el-input
            v-model="detail.introducer"
            class="w300"
            placeholder="请填写介绍人" 
          />
          
        </el-form-item>
        <el-form-item label="身份证号:" prop="id_number">
          <el-input v-model="detail.id_number" class="w300" placeholder="请填写身份证号" />
        </el-form-item>   
      </div>

            
      <div class="title">客户就诊信息</div>
      <div class="form">
        <el-form-item label="咨询项目：" prop="item_type">
          <el-cascader
            placeholder="请选择咨询项目"
            class="w300"
            :options="scarList"
            :value="detail.item_type"
            :props="props"
            clearable
            @change="changeOp"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="到店类型：" prop="type_store">
          <el-select
            v-model="detail.type_store"
            class="w300"
            placeholder="请选择到店类型"
          >
            <el-option
              v-for="item in options.inStore_Type"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="治疗进展：" prop="repair_progress">
          <el-select
            v-model="detail.repair_progress"
            class="w300"
            placeholder="请选择治疗进展"
          >
            <el-option
              v-for="item in options.repair_progress"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="治疗科室：" prop="department">
          <el-select
            v-model="detail.department"
            class="w300"
            placeholder="请选择治疗科室"
          >
            <el-option
              v-for="item in options.treat_Department"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="主治医师：" prop="doctor_id">
          <el-select
            v-model="detail.doctor_id"
            class="w300"
            placeholder="请选择主治医师"
          >
            <el-option
              v-for="item in options.doctorList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
             <el-form-item label="责任护士：" prop="nurse_id">
          <el-select
            v-model="detail.nurse_id"
            class="w300"
            placeholder="请选择责任护士"
          >
            <el-option
              v-for="item in options.nurseList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
            <el-form-item label="责任护理师：" prop="duty_nures_id">
              <el-select
                v-model="detail.duty_nures_id"
                class="w300"
                placeholder="请选择责任护理师"
              >
                <el-option
                  v-for="item in options.duty_nuresList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
        </el-form-item>
        <el-form-item label="所属咨询：">
            <el-select
            v-model="detail.developers"
            class="w300"
            placeholder="请选择"
          >
            <el-option
              v-for="item in options.developersList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="备注信息：">
          <el-input
            v-model="detail.remarks"
            class="w300"
            placeholder="请填写备注"
            type="textarea"
            :rows="4"
          />
        </el-form-item>
      </div>

      <div class="btnBox">
        <el-button
          type="primary"
          size="mini"
          class="mainBtn"
          @click="submitForm('detail')"
          >提交</el-button
        >
      </div>
    </el-form>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import region from "@/components/Region";
import {
  ssettingList,
  addClient,
  updateClient,
  clientDetail,
  ClientDetail,
  verifyPhone,
} from "@/api/client";
import { staffList, readAdminPositionList } from "@/api/staff";
import { goodsTypeList ,getProductTypeParent} from '@/api/goods';
import { convertToTreeData } from '@/utils/constants';
import { getShopList } from "@/api/shop";
import { read_member_label } from "@/api/permission";
class Detail {
  customer_name = "";
  duty_nures_id="";
  telephone = "";
  sex = 2;
  birthday = "";
  nurse_id = "";
  province = "";
  city = "";
  region = "";
  detailed_address = "";
  source_id = "";
  source_type_id = "";
  outreach_id = "";
  shop_id = "";
  repair_progress = "";
  department = "";
  doctor_id = "";
  remarks = "";
  item_type = [];
  developers = "";
  introducer = "";
  type_store = '';
  operator = "";
  id_number = "";
}
class Rules {
  birthday = [
    { required: true, message: "请添加客户生日", trigger: "blur" },
  ];
  customer_name = [
    { required: true, message: "请填写客户名称", trigger: "blur" },
  ];
  telephone = [
    { required: true, message: "请填写手机号", trigger: "blur" },
    {
      pattern: /^[1][3,4,5,6,7,8,9][0-9]{9}$/,
      message: "手机号格式不对",
      trigger: "change",
    },
  ];
  shop_id = [
    { required: true, message: "请选择门店", trigger: "change" },

  ];
  source_id = [
    { required: true, message: "请选择客户来源", trigger: "change" },
  ];
  id_number = [
    {
      pattern:/(^[1-9]\d{5}\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}$)|(^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[0-9Xx]$)/,
      message: "身份证号格式不对",
      trigger: "change"
    }
  ];
  // type_store = [
  //   { required: true, message: "请选择到店类型", trigger: "blur" },

  // ];
  // source_id = [
  //   { required: true, message: "请选择", trigger: "blur" },

  // ];
  // department = [
  //   { required: true, message: "请选择", trigger: "blur" },

  // ];
  // doctor_id = [
  //   { required: true, message: "请选择", trigger: "blur" },

  // ];
  // nurse_id = [
  //   { required: true, message: "请选择", trigger: "blur" },

  // ];

  // item_type = [{ required: true, message: "请选择咨询项目", trigger: "change" }];
  // repair_progress = [
  //   { required: true, message: "请选择治疗进度", trigger: "change" },
  // ];
}
class Options {
  source_id = [];
  source_type_id = [];
  shop_id = [];
  type_id = [];
  developersList = [];
  duty_nuresList = [];
  nurseList = [];
  doctorList = [];
  inStore_Type = [
    {id:1,name:'首诊'},
    {id:2,name:'复诊'},
    {id:3,name:'再消费'},
    {id:4,name:'诊疗'},
    {id:5,name:'其他'},
  ];
  // 疤痕科目、医美科目、生美科目、产品科目 客户档案录入
  treat_Department = [
    {id:1,name:'疤痕科'},
    {id:2,name:'医美科'},
    {id:3,name:'生美科'},
    {id:4,name:'产品科'},
  ];
  position_id = [];
  repair_progress = [];
  member_label = [];
}

export default {
  components: {
    region,
  },

  data() {
    return {
      shop_name:'',
      customerSourceShow : false,
      detail: new Detail(),
      rules: new Rules(),
      options: new Options(), // 选项
      id: 0,
      region: {
        province_id: "",
        city_id: "",
        district_id: "",
      },
      scarList: [],
      props: { multiple: true },
      memberList: [],
      member_label: [],
      disabled: false,
      disabledFirst: false,
      disabledSecond: false,
      disabledZtellphone: false,
      disabledShowBalance:true,
      disabledShowCard:true,

      // 限制当前日期之前
      pickerOptions: {
        disabledDate(time) {
          return (
            time.getTime() > new Date(getDateStr(0) + "23:59:59").getTime()
          );
        },
      },
      pickerBeginDateBefore: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
    };
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  watch: {},
  mounted() {
    this.getOptionsList();
    this.id = this.$route.query.clienId ? this.$route.query.clienId : 0;
    if(  this.id != 0 ){
      this.disabled = true
      this.getClinetDetail();
    }
	  this.turn_customerid != '' ? (this.disabledZtellphone = true) : (this.disabledZtellphone = false);
    this.getOptions();
    this.getShop('',this.userInfo.shop_id)
  },

  methods: {
    getClinetDetail(){
      ClientDetail({id:this.id}).then(res=>{
        this.shop_name = res.shop_name
        
        this.detail = {
          duty_nures_id:res.duty_nures_id,
          customer_name: res.customer_name,
          telephone: res.telephone,
          sex: res.sex,
          birthday: res.birthday,
          nurse_id: res.nurse_id,
          province: res.province,
          city: res.city,
          region: res.region,
          detailed_address: res.detailed_address,
          source_id: res.source_id,
          source_type_id: res.source_type_id,
          outreach_id: res.outreach_id,
          shop_id: res.shop_id,
          repair_progress: res.repair_progress,
          department: res.department,
          doctor_id: res.doctor_id,
          remarks: res.remarks,
          item_type:  JSON.parse(res.item_type) ,
          developers: res.developers ,
          introducer: res.introducer ,
          id: res.id, 
          type_store: res.type_store,
          operator: res.operator,
          id_number:res.id_number
        };
        const { province, city, region } = res;
        this.region = {
          province: {
            id: parseInt(province),
          },
          city: {
            id: parseInt(city),
          },
          district: {
            id: parseInt(region),
          },
        };
        this.region.province_id = parseInt(province) || "";
        this.region.city_id = parseInt(city) || "";
        this.region.district_id = parseInt(region) || "";

      })
    },
    getOptionsList(){
      getProductTypeParent({ level : 'two' }).then(res => {
        this.scarList  = convertToTreeData(res.data);

      })
      //   goodsTypeList({type:'name'}).then(res => {
      //     this.scarList = convertToTreeData(res.data);
      // })
    },
    //  blurPhone(e){
    //      console.log(e)
    //      verifyPhone({ phone:e }).then((res) => {
    //        console.log(res)
    //        if(res.shop_name != ''){

    //          this.$message({
    //            dangerouslyUseHTMLString: true,
    //            message: res.shop_name + '<p> 请勿重复添加<p/> '
    //          });
    //        }
    //      });
    //    },

     changeSource(e){
      console.log(e,)
       this.detail.source_type_id = "";
      if(e == 665){
          this.customerSourceShow = true;
      }else{
          this.customerSourceShow = false;
      }
    },
    // 改变疤痕资料
    changeOp(e) {
      this.detail.item_type = e

    },
    // 改变客户标签
    changeMember(e) {
      this.member_label = e;
      this.detail.member_label = e.map((i) => {
        return i[1];
      });
    },
    // 获取选项
    getOptions() {
      let that = this;
      ssettingList({ page: 1, limit: 100000 }).then((res) => {
        res.list.forEach(function (item) {
          if (item.category_id == 1) {
            that.options.type_id.push(item);
          } else if (item.category_id == 2) {
            that.options.position_id.push(item);
          } else if (item.category_id == 4) {
            that.options.source_id.push(item);
          } else if (item.category_id == 5) {
            that.options.repair_progress.push(item);
          }else if (item.category_id == 15) {
            that.options.source_type_id.push(item);
          }
        });
        that.id ? that.changeShop(that.detail.shop_id) : "";
      });
    },
    // 门店列表
    getShop(e,id) {
      getShopList({ page: 1, limit: 1000000, shopName: e ,shopId:id}).then((res) => {
          this.options.shop_id = res.list;
         if(id){
          this.shop_name = res.list[0].shopName
          this.detail.shop_id = res.list[0].shopId
          this.changeShop(this.detail.shop_id)
        }
      });
    },
    // 选择门店
    async changeShop(id) {
      // 获取门店下员工
      staffList({ shopId: id, page: 1,positionId:6, limit: 1000000 }).then((res) => {
        this.options.doctorList = res.list;
      });
       staffList({ shopId: id, page: 1, positionId:4,limit: 1000000 }).then((res) => {
        this.options.nurseList = res.list;
      });
       staffList({ shopId: id, page: 1,positionId:5, limit: 1000000 }).then((res) => {
        this.options.duty_nuresList = res.list;
      });
       staffList({ shopId: id, page: 1,positionId:2, limit: 1000000 }).then((res) => {
        this.options.developersList = res.list;
      });
    },
    //选择护理师之前
    focusNurseid() {
      if (!this.detail.shop_id) {
        this.$message({
          message: "请先选择门店哦~",
          type: "warning",
        });
      }
    },
    // 获取地区
    getRegion(region) {
      const { province_id, city_id, district_id } = region;
      this.detail.province = province_id;
      this.detail.city = city_id;
      this.detail.region = district_id;
    },
    // 提交图片
    handleUpload() {
      this.$refs.uploader.goToUpload();
    },
    // 提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
		    if (valid) {
          this.hint(this.id ? "更新" : "添加");

        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 提示
    hint(text) {
      this.$confirm(`确定${text}此客户信息吗？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.confirm();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    // 确认提交
    confirm() {
      this.detail.operator = this.userInfo.id;
      if (this.id) {
        updateClient({ ...this.detail }).then((res) => {
          this.$message({
            type: "success",
            message: res.msg,
          });
          this.$router.go(-1);

        });
      } else {
        addClient({ ...this.detail }).then((res) => {
          this.$message({
            type: "success",
            message: res.msg,
          });
          this.$router.go(-1);
        });
      }
    },
    // 返回
    back() {
      const query = {
        detail: this.$route.query.detail,
        id: this.$route.query.detail.id,
        activeName: "first",
      };
      this.$router.push({ name: "客户详情", query });
    },
  },
};
</script>

<style lang="scss" scoped>
.batchBox{
  width: 70%;
}
.title {
  font-weight: bold;
  font-size: 14px;
  padding: 10px 20px;
  color: #666;
  background: #F5F7FA;
}
.form {
  padding-top: 25px;
  display: flex;
  flex-wrap: wrap;

  ::v-deep .el-form-item {
    display: flex;
    min-height: 42px;
  }
  ::v-deep .el-form-item {
    width: 45%;
  }
  ::v-deep .el-form-item--mini .el-form-item__label {
    // width: 112px;
    width: 125px;
  }
  ::v-deep .region .el-select {
    width: 100px;
  }
}

.btnBox {
  width: 90%;
  text-align: center;
  .mainBtn {
    padding: 6px 40px;
    margin-top: 100px;
  }
}
.center {
  width: 100% !important;
}
.scarBox {
  display: flex;
  .imgBox {
    margin-left: 100px;
    // padding: 30px;
    // background-color: pink;
  }
}
</style>
